<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .container{
        width: 600px;
        margin: 0 auto;
    }

    h1 {
        text-align: center;
    }

    p {
        color: #555;
        text-align: center;
    }
    
    .row {
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }

    .row span {
        width: 120px;
    }

    .row input {
        height: 30px;
        width: 205px;
        margin-top: 5px;
    }

    .row button {
        margin-top: 5px;
        height: 30px;
        width: 330px;
        border: none;
        border-radius: 5px;
        background-color: green;
    }

    /* 点击时, 发生颜色变化, 更清晰的表面已经点击 */
    .row button:active {
        background-color: #555;
    }


</style>

<body>
    <!-- 表白墙容器 -->
    <div class="container">

        <h1>表白墙</h1>
        <p>输入内容点击提交, 即可发送表白, 快来试试吧!</p>

        <!-- 第一行 -->
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>

        <!-- 第二行 -->
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>


        <!-- 第三行 -->
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>

        <div class="row">
            <button id="sumbit">提交</button>
        </div>

        <div class="row">
            <button id="revers">撤销</button>
        </div>

    </div>

    <!-- 引入 jQuery cdn  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#sumbit');
        let containerDiv = document.querySelector('.container');
        button.onclick = function() {
            // 分别取出三个input中的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;

            // 发送之前判定是否有内容为空
            if(from == ' ' || to == ' ' || message =='') {
                return;
            }
            // 构造一个新的 div 添加到原本的表白墙下面
            // 新增一个 div 标签存储表白后的内容并在底下追加该内容
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message'; // 设置为 row 使用上面统一 css 样式
            rowDiv.innerHTML = from + " 对 " +  to + " 说: " + message
            
            // 添加到 container 中
            containerDiv.appendChild(rowDiv);

            // 点击提交之后 清空内容
            for(let input of inputs) {
                input.value = ' ';
            }

            // 给服务器发送 post 请求, 把上述数据提交到服务器
            let body = {
                // 第一个 from 表示key 字符串
                // 第二个 表示 key 对应的 value 一个变量
                // js 中对象的 key 必须为字符串, 可以省略

                // key - value 形式
            
                "from": from,  //变量的内容为 let from = inputs[0].value; 用户输入框中的内容
                "to": to,
                "message": message    
            };

            // 当前此处 body 是一个 js 格式,不是字符串
            // 网络传输只能是是字符串, 不能传对象
            // js内置了 json 转换库, 需要把 js 对象转为 json 格式的字符串  
            let strBody = JSON.stringify(body)
            console.log("strBody:" + strBody); // 打印观察此时 转为的 json 字符串结果
            $.ajax({
                type : 'post',
                url : 'message',
                data : strBody,
                contentType:"application/json; charset = utf8",
                // 请求成功时执行函数, 作为一个 Ajax 事件
                // 无论 Ajax 请求在核实成功完成, jQuery 都会除法该 ajax Success事件
                // AjaxSuccess() 方法注册的任何函数都会被执行
                success: function(body) {
                    console.log("数据发送成功");
                }
            });

            
        }

        let reversButton = document.querySelector('#revers');
        reversButton.onclick = function() {
            // 选中所有的 row 行 删除最后一行 row
            let rows = document.querySelectorAll('.message');
            // 当这一条消息为空  或者 没有消息 直接返回
            if(rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);

            //发送一个 Delete 请求,给服务器, 服务器中删除最后一条消息
            $.ajax({
               type: 'delete',
               url: 'message',
               success: function(body) {
                   console.log("删除成功!");
               } 
            });
        }

        

        // 页面加载得时候， 发送 GET 请求， 从服务器获取到数据并加载到页面当中
        $.ajax({
                tyep: 'get',
                url: 'message',
                success: function(body) {
                    for(let i = 0; i < body.length; i++) {
                        
                        // 这个格式里从 json 数组中 获取的 message 对象 是一个 js对象 , 每一条消息又是一个 message 对象 
                        let rowDiv = document.createElement('div');
                        rowDiv.className = 'row message'; 
                        // 把 message 对象中的 from  to message 构造以后发送到浏览器
                        rowDiv.innerHTML = body[i].from + " 对 " +  body[i].to + " 说: " + body[i].message
            
                        // 添加到 container 中
                        containerDiv.appendChild(rowDiv);
                        if(body.length > 10) {
                            body.splice(0,body.length - 10);
                        }
                    }   
                }
            });

    </script>

</body>
</html>